<template lang="pug">
    sbpro-layout-default(
        footerClasses='bg-cse footer-dark'
    )

        sbpro-top-nav(
            topNavClasses='bg-cse navbar-dark fixed-top',
            brandClasses='text-white',
            buttonClasses='btn-teal'
        )

        sbpro-page-header(
            headerClasses='bg-img-cover overlay overlay-70 page-header-dark',
            borderType='rounded',
            borderClasses='text-light',
            backgroundImage='url("/assets/img/banners/carousel2.jpg")',
        )
            .page-header-content
                .container.text-center
                    .row.justify-content-center
                        .col-lg-8
                            h1.page-header-title 搜索结果
                            p.page-header-text.mb-0
                                | Search results for keywords '{{keywords}}', page '{{currentPage}}'

        sbpro-page-section(
            id='contentSection'
            sectionClasses='py-5 bg-light',
            borderType='rounded',
            borderClasses='text-cse'
        )
            .container
                //标题
                .post-archive-tag.mt-4.mb-3 搜索&nbsp;
                    .badge.badge-primary-soft.badge-pill.text-primary {{keywords}}
                    | &nbsp;的结果项, 当前页数为: {{currentPage}}

                //搜索结果列表
                template(v-for="post in postList")
                    media-list-item(
                        :articleUrl="'/post/' + post.pid"
                        :imgUrl="post.imgUrl"
                        :head="post.title"
                        :intro="post.desc"
                        :date="sliceDate(post.datetime)"
                        :views="post.views"
                        img-position="left"
                        :keywords="keywords"
                    )
                    hr.my-0

                //boostrap分页器
                b-pagination.pagination-blog.my-5.pt-lg-1(
                    v-model="currentPage"
                    :total-rows="rows"
                    :per-page="perPage"
                    align="center"
                    pills
                )

</template>

<script>
import SBProTopNav from '@structural/top-nav.vue';
import SBProPageHeader from '@structural/page-header.vue';
import SBProLayoutDefault from '@structural/layout-default.vue';
import SBProPageSection from '@structural/page-section.vue';
import MediaListItem from '../../media_layout/media-list-item';
import { getPostListByKeywords } from '../../../api/search';
import { activatedFlag } from '../../../utils/mixin';

export default {
    name: 'Search',
    mixins: [activatedFlag],
    components: {
        MediaListItem,
        'sbpro-top-nav': SBProTopNav,
        'sbpro-page-header': SBProPageHeader,
        'sbpro-layout-default': SBProLayoutDefault,
        'sbpro-page-section': SBProPageSection,
    },
    methods: {
        sliceDate(datetime) {
            return datetime.split(' ')[0];
        },
        changeCurrentPage() {
            return getPostListByKeywords(
                this.keywords,
                this.perPage,
                this.currentPage
            ).then(({ postList, pageInfo }) => {
                this.postList = postList;
                this.rows = pageInfo.rows;
                window.scrollTo(0, 0);
            });
        },
        //跳转路由 至指定页数,
        routeSetPage(page) {
            this.$router
                .push({
                    name: 'Search',
                    query: { keywords: this.keywords, page: page },
                })
                .catch(err => err);
        },
    },
    computed: {
        keywords() {
            return this.$route.query.keywords;
        },
        queryPage() {
            return this.$route.query.page;
        },
        currentPage: {
            get() {
                return parseInt(this.queryPage) || 1;
            },
            set(val) {
                // 如果搜索页面不是当前页面, 则当前页面不发生改变
                if (!this.activatedFlag) {
                    return this.currentPage;
                }
                // 否则监听并修改路由参数
                else {
                    this.routeSetPage(val);
                }
            },
        },
    },
    data() {
        return {
            rows: 0,
            perPage: 8,
            postList: [],
        };
    },
    created() {
        //如果不存在页数参数则添加上
        if (!this.queryPage) {
            this.routeSetPage(1);
        }
        //拉取数据
        this.changeCurrentPage();
    },
    watch: {
        keywords: function(newVal) {
            if (this.activatedFlag && newVal) {
                this.changeCurrentPage();
            }
        },
        // 在这监听并执行异步方法
        currentPage: function() {
            //页面激活时再拉取数据
            if (this.activatedFlag) {
                this.changeCurrentPage();
            }
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.post-archive-tag {
    text-transform: none;
}
</style>
